<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商品详情界面</title>
    <link rel="stylesheet" th:href="@{/common/layui/css/layui.css}">
    <script th:src="@{/common/js/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/common/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/common/layui/layui.all.js}" type="text/javascript"></script>
    <script th:src="@{/common/js/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/common/js/base.js}" type="text/javascript"></script>
    <style>
</style>
</head>
<body style="margin: 0;padding: 0;" id="body">

<div style="width:90%; height: 90%;margin-left: 50px;margin-top: 30px; "  >
    <div class="layui-row" style="height: 320px">
        <div><p>商品信息</p>

        </div>
        <hr>
        <div id="picture" class="layui-col-md5" style="height: 320px" >
            <div class="layui-carousel" id="test1">
                <div carousel-item style="width:230px;margin: 0px auto; text-align: center " >
                    <img th:each="m : ${image}" th:src="${m.image}" onclick="openImage(this)" />
                </div>
            </div>
        </div>
        <div id="goodInfo" class="layui-col-md7" style="height: 300px ;width: 520px;">

            <form class="layui-form" action="" style="height:95%;width: 100%; padding-top: 25px; ">
                <div class="layui-form-item">
                    <!--<label class="layui-form-label">商品描述</label>-->
                    <!--<div class="layui-input-block">-->
                        <input type="text" id="sid" name="sid" class="layui-input" style="display: none" th:value="${data.sid}">

                        <input type="text" class="layui-textarea" name="descript" id="descript"
                               readonly="readonly" style="width: 94%;margin-left: 30px; font-size: 16px"
                               th:value="${data.descript}">
                    <!--</div>-->
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品名:</label>
                    <div class="layui-input-block">
                        <input class="layui-input"  type="text" id="sname" name="sname" lay-verity="required" readonly="readonly" autocomplete="off"
                               th:value="${data.sname}"/>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">数量:</label>
                            <div class="layui-input-block">
                                <input class="layui-input"  type="text" id="cou" name="cou" lay-verity="required" readonly="readonly" autocomplete="off"
                                       th:value="${data.cou}"/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">起拍价:</label>
                            <div class="layui-input-block">
                                <input class="layui-input"  type="text" id="price" name="price" lay-verity="required" readonly="readonly" autocomplete="off"
                                       th:value="${data.price}"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">起拍时间:</label>
                            <div class="layui-input-block">
                                <input class="layui-input"  type="text" id="start" name="start" lay-verity="required" readonly="readonly" autocomplete="off"
                                       th:value="${data.start}"/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">结束时间:</label>
                            <div class="layui-input-block">
                                <input class="layui-input"  type="text" id="end" name="end" lay-verity="required" readonly="readonly" autocomplete="off"
                                       th:value="${data.end}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-row" id="userInfo" style="height: 100px;">
        <div><p>卖家用户信息</p></div>
        <hr>
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名:</label>
                    <div class="layui-input-block">
                        <input class="layui-input" style="border:none"  type="text" id="uname" name="uname" lay-verity="required" readonly="readonly"
                               autocomplete="off" th:value="${data.uname}"/>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户地址:</label>
                    <div class="layui-input-block">
                        <input class="layui-input" style="border:none"  type="text" id="dizhi" name="dizhi" lay-verity="required"
                               readonly="readonly" autocomplete="off" th:value="${data.dizhi}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" id="auctionInfo" style="height: 90px; ">
        <div><p>竞拍信息</p></div>
        <hr>
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名:</label>
                    <div class="layui-input-block">
                        <input class="layui-input" style="border:none"  type="text" id="buyuname"
                               name="buyuname" lay-verity="required" readonly="readonly" autocomplete="off"
                               />
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">拍卖价格:</label>
                    <div class="layui-input-block">
                        <input class="layui-input" style="border:none"  type="text"
                               name="buyprice" id="buyprice" lay-verity="required" readonly="readonly" autocomplete="off"
                               />
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">出价时间:</label>
                    <div class="layui-input-block">
                        <input class="layui-input" style="border:none"  type="text" id="date" name="date"
                               lay-verity="required" readonly="readonly" autocomplete="off"
                               />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" id="btn" style="height: 30px; text-align: center;margin: 0px auto;">
        <input type="button" value="我也来出价" style="height: 30px;width: 100px ;background-color: #f7514d" onclick="openAuctionPage()" />
    </div>
    </div>
</body>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            // ,anim: 'updown' //切换动画方式
        });
    });
</script>
<script type="text/javascript">
    var static_index ="";
    $(function () {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.title('商品详情界面', index);  //再改变当前层的标题
        //设置组区域的高
        // alert($("#body").height());
        $("#main").height(630);
        $("#test1").height(300);
        //异步获取竞拍信息
        getAuctionInfo();
        // 根据操作判断显示内容
    });

    function openAuctionPage() {
        layer.open({
            type: 2,
            area: ['500px', '300px'],
            skin: 'layui-layer-rim', //加上边框
            // btn: ['关闭','false'],
            // shadeClose:true,
            content: ["/goods/openAuctionPage.do", "no"],
            scrollbar: false,
            success:function(layero,index) {
                var sid = $("#sid").val();
                var buyprice = $("#buyprice").val();
                var price = $("#price").val();
                var sname = $("#sname").val();
                var iframe = window['layui-layer-iframe' + index];
                if( buyprice == "" || buyprice == undefined ){
                    iframe.child(sid,price,sname);
                }else{
                    iframe.child(sid,buyprice,sname);
                }
                static_index = index;
            }
        });
    }
    function closeWindow(){
        layer.close(static_index);
        getAuctionInfo();
    }

    function getAuctionInfo(){
        var param = {};
        param.sid =$("#sid").val();
        $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded; charset=utf-8", // post提交乱码
            url: "/goods/getAuctionInfo.do",
            async: true,
            data: param,
            success: function (data) {
                if(data.success){
                    //给输入框赋值
                    Base.setInputValue(data);
                }
            }
        });
    }

    function openImage(obj){
        window.open(obj.src);
    }
</script>
</html>